<template>
  <view class="moments-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <uni-icons type="left" size="24" color="#333" />
      </view>
      <view class="nav-title">车主圈</view>
      <view class="nav-right"></view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view scroll-y="true" class="content-scroll" @scrolltolower="onReachBottom">
      <!-- 轮播图区域 -->
      <view class="banner-section">
        <uni-swiper-dot :info="true" :current="currentBanner" @clickItem="clickBannerItem">
          <swiper 
            class="banner-swiper" 
            :current="currentBanner" 
            @change="bannerChange"
            autoplay
            interval="5000"
            duration="500"
            circular
          >
            <swiper-item>
              <view class="banner-item">
                <image 
                  class="banner-image" 
                  src="@/static/images/img_car.png" 
                  mode="aspectFill"
                />
                <view class="banner-content">
                  <view class="banner-title">跨城怕空返？</view>
                  <view class="banner-subtitle">返程优先派！</view>
                  <image 
                    class="banner-car" 
                    src="@/static/images/img_car.png" 
                    mode="aspectFit"
                  />
                </view>
              </view>
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
      </view>
      
      <!-- 卡片区域 -->
      <view class="cards-section">
        <view class="cards-row">
          <!-- 官方动态 -->
          <view class="card-item" @click="goToOfficialMoments">
            <view class="card-header">
              <view class="card-title">官方动态</view>
              <uni-icons type="right" size="14" color="#999" />
            </view>
            <view class="card-content">
              <image 
                class="card-image" 
                src="@/static/images/img_car.png" 
                mode="aspectFill"
              />
              <view class="card-avatar">
                <image 
                  class="avatar-image" 
                  src="@/static/images/circle_own_via.png" 
                  mode="aspectFill"
                />
                <text class="avatar-name">车师傅</text>
              </view>
              <view class="card-badge">有奖分享</view>
            </view>
          </view>
          
          <!-- 热门话题 -->
          <view class="card-item card-topic" @click="goToHotTopics">
            <view class="card-header">
              <view class="card-title">热门话题</view>
              <uni-icons type="right" size="14" color="#999" />
            </view>
            <view class="topic-content">
              <view class="topic-item">
                <view class="topic-icon">
                  <image 
                    class="avatar-image" 
                    src="@/static/images/official_icon_topics_tag.png" 
                    mode="aspectFill"
                  />
                </view>
                <text class="topic-text">好意见会实现！</text>
              </view>
              <view class="topic-item">
                <view class="topic-icon">
                  <image 
                    class="avatar-image" 
                    src="@/static/images/official_icon_topics_tag.png" 
                    mode="aspectFill"
                  />
                </view>
                <text class="topic-text">这些升级 您试了...</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 动态列表 -->
      <view class="moments-list">
        <!-- 置顶动态 -->
        <view class="moment-item" @click="goToMomentDetail">
          <view class="sticky-badge">
            <image 
              class="post_top" 
              src="@/static/images/circle_icon_post_top.png" 
              mode="aspectFill"
            />
            <text class="sticky-text">置顶</text>
          </view>
          
          <!-- 用户信息 -->
          <view class="user-info">
            <image 
              class="user-avatar" 
              src="@/static/images/circle_own_via.png" 
              mode="aspectFill"
            />
            <view class="user-details">
              <view class="user-name">车师傅</view>
              <view class="post-time">2024-3-26 16:57</view>
            </view>
          </view>
          
          <!-- 动态内容 -->
          <view class="moment-content">
            <view class="moment-tags">
              <text class="tag-text">#欢迎来到车主圈</text>
            </view>
            <view class="moment-text">
              欢迎师傅们来到自己的圈子，在交流页车主圈板块点击「更多」查看更多帖子
            </view>
            <view class="moment-location">
              <uni-icons type="map" size="12" color="#999" />
              <text class="location-text">杭州市</text>
            </view>
          </view>
          
          <!-- 互动数据 -->
          <view class="interaction-bar">
            <view class="interaction-item-left">
              <text class="interaction-text">浏览8.5万次</text>
            </view>
            <view class="interaction-item" @click.stop="showReplyInput">
              <image 
                class="icon_post" 
                src="@/static/images/circle_icon_post.png" 
                mode="aspectFill"
              />
              <text class="interaction-text">12189</text>
            </view>
            <view class="interaction-item" @click.stop="toggleLike">
              <image 
                class="icon_post" 
                src="@/static/images/circle_icon_post_good.png" 
                mode="aspectFill"
              />
              <text class="interaction-text">8286</text>
            </view>
          </view>
        </view>
        
        <!-- 普通动态 -->
        <view class="moment-item" @click="goToMomentDetail">
          <!-- 用户信息 -->
          <view class="user-info">
            <image 
              class="user-avatar" 
              src="@/static/images/circle_own_via.png" 
              mode="aspectFill"
            />
            <view class="user-details">
              <view class="user-name">车师傅</view>
              <view class="post-time">2024-3-26 16:57</view>
            </view>
          </view>
          
          <!-- 动态内容 -->
          <view class="moment-content">
            <view class="moment-tags">
              <text class="tag-text">#分享出车生活，展现司机风采</text>
            </view>
            <view class="moment-text">
              不知道那些双证齐全的司机师傅们在宜春能跑多少流水
            </view>
          </view>
          
          <!-- 互动数据 -->
          <view class="interaction-bar">
            <view class="interaction-item-left">
              <text class="interaction-text">浏览2.3万次</text>
            </view>
            <view class="interaction-item" @click.stop="showReplyInput">
              <uni-icons type="comment" size="16" color="#999" />
              <text class="interaction-text">3452</text>
            </view>
            <view class="interaction-item" @click.stop="toggleLike">
              <uni-icons type="thumbs-up" size="16" color="#999" />
              <text class="interaction-text">1865</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部功能栏 -->
    <!-- <view class="bottom-function-bar">
      <view class="function-item">
        <image 
          class="function-icon" 
          src="https://static.lixingpt.com/function_service.png" 
          mode="aspectFit"
        />
        <text class="function-text">服务中心</text>
      </view>
      <view class="function-item">
        <image 
          class="function-icon" 
          src="https://static.lixingpt.com/function_charging.png" 
          mode="aspectFit"
        />
        <text class="function-text">附近充电</text>
      </view>
      <view class="function-item">
        <image 
          class="function-icon" 
          src="https://static.lixingpt.com/function_map.png" 
          mode="aspectFit"
        />
        <text class="function-text">司助手</text>
      </view>
      <view class="function-item">
        <image 
          class="function-icon" 
          src="https://static.lixingpt.com/function_tool.png" 
          mode="aspectFit"
        />
        <text class="function-text">查车工具</text>
      </view>
    </view> -->
    
    <!-- 悬浮发布按钮 -->
    <view class="publish-btn" @click="goToPublish">
      <image 
        class="user-avatar" 
        src="@/static/images/btn_publish.png" 
        mode="aspectFill"
      />
    </view>
    
    <!-- 回复输入框弹窗 -->
    <uni-popup ref="replyPopup" type="bottom" :maskClick="true" :safeArea="true">
      <view class="reply-popup-content">
        <view class="reply-input-container">
          <input 
            class="reply-input" 
            v-model="replyContent" 
            placeholder="写下你的评论..." 
            placeholder-class="reply-placeholder"
          />
        </view>
        <view class="reply-actions">
          <button class="cancel-reply-btn" @click="closeReplyPopup">取消</button>
          <button 
            class="submit-reply-btn" 
            :disabled="!replyContent.trim()"
            @click="submitComment"
          >
            发布
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getMomentsList, getHotTopics, likeMoment, postComment } from '@/api/moments/index.js';

export default {
  data() {
    return {
      currentBanner: 0,
      momentsList: [],
      hotTopics: [],
      replyContent: '',
      currentMomentId: '',
      pageNum: 1,
      pageSize: 10,
      hasMore: true,
      loading: false
    };
  },
  
  onLoad() {
    this.loadMomentsData();
    this.loadHotTopics();
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 轮播图切换
    bannerChange(e) {
      this.currentBanner = e.detail.current;
    },
    
    // 点击轮播图项
    clickBannerItem(index) {
      this.currentBanner = index;
      // 跳转到相关活动页面
      uni.navigateTo({
        url: '/pages/activity/index?type=return_trip'
      });
    },
    
    // 跳转到官方动态
    goToOfficialMoments() {
      uni.navigateTo({
        url: '/pages/moments/official'
      });
    },
    
    // 跳转到热门话题
    goToHotTopics() {
      uni.navigateTo({
        url: '/pages/moments/topics'
      });
    },
    
    // 跳转到动态详情
    goToMomentDetail(item) {
      const momentId = item ? item.id : '1';
      uni.navigateTo({
        url: `/pages/moments/detail?momentId=${momentId}`
      });
    },
    
    // 跳转到发布页面
    goToPublish() {
      uni.navigateTo({
        url: '/pages/moments/publish'
      });
    },
    
    // 显示回复输入框
    showReplyInput(e, item) {
      e.stopPropagation();
      this.currentMomentId = item ? item.id : '1';
      this.replyContent = '';
      this.$refs.replyPopup.open();
    },
    
    // 关闭回复弹窗
    closeReplyPopup() {
      this.$refs.replyPopup.close();
    },
    
    // 提交评论
    submitComment() {
      if (!this.replyContent.trim()) {
        return;
      }
      
      postComment({
        momentId: this.currentMomentId,
        content: this.replyContent
      }).then(res => {
        if (res.code === 0) {
          uni.showToast({
            title: '评论成功',
            icon: 'success'
          });
          this.closeReplyPopup();
          this.loadMomentsData(); // 刷新列表
        } else {
          uni.showToast({
            title: res.msg || '评论失败，请重试',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('评论失败:', err);
        uni.showToast({
          title: '网络异常，请重试',
          icon: 'none'
        });
      });
    },
    
    // 点赞/取消点赞
    toggleLike(e, item) {
      e.stopPropagation();
      const momentId = item ? item.id : '1';
      const isLiked = item ? item.isLiked : false;
      
      if (isLiked) {
        // 取消点赞
        unlikeMoment(momentId).then(res => {
          if (res.code === 0) {
            this.loadMomentsData(); // 刷新列表
          }
        });
      } else {
        // 点赞
        likeMoment(momentId).then(res => {
          if (res.code === 0) {
            this.loadMomentsData(); // 刷新列表
          }
        });
      }
    },
    
    // 加载动态列表
    loadMomentsData() {
      this.loading = true;
      getMomentsList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        if (res.code === 0 && res.data) {
          if (this.pageNum === 1) {
            this.momentsList = res.data.list || [];
          } else {
            this.momentsList = [...this.momentsList, ...(res.data.list || [])];
          }
          this.hasMore = this.momentsList.length < res.data.total;
        }
        this.loading = false;
      }).catch(err => {
        console.error('加载动态列表失败:', err);
        this.loading = false;
      });
    },
    
    // 加载热门话题
    loadHotTopics() {
      getHotTopics().then(res => {
        if (res.code === 0) {
          this.hotTopics = res.data || [];
        }
      }).catch(err => {
        console.error('加载热门话题失败:', err);
      });
    },
    
    // 上拉加载更多
    onReachBottom() {
      if (!this.hasMore || this.loading) {
        return;
      }
      this.pageNum++;
      this.loadMomentsData();
    }
  }
};
</script>

<style scoped>
.moments-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
}

/* 顶部导航栏 */
.nav-bar {
  height: 88rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-left {
  width: 88rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.nav-right {
  width: 88rpx;
  height: 88rpx;
}

/* 滚动区域 */
.content-scroll {
  flex: 1;
}

/* 轮播图区域 */
.banner-section {
  margin: 30rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.banner-swiper {
  height: 280rpx;
}

.banner-item {
  position: relative;
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.banner-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40rpx;
}

.banner-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.banner-subtitle {
  font-size: 30rpx;
  color: #666;
}

.banner-car {
  position: absolute;
  right: 40rpx;
  bottom: 30rpx;
  width: 200rpx;
  height: 100rpx;
}

/* 卡片区域 */
.cards-section {
  padding: 0 30rpx 30rpx;
}

.cards-row {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.card-item {
  flex: 1;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.card-content {
  position: relative;
  height: 180rpx;
}

.card-title {
  /* font-family: PingFang SC, PingFang SC; */
  font-weight: 500;
  font-size: 32rpx;
  color: #000000;
}

.card-image {
  width: 100%;
  height: 100%;
}

.card-avatar {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.topic-icon {
  width: 32rpx;
  height: 32rpx;
  background: linear-gradient( 180deg, #FFB63D 0%, #FF874E 100%);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-image {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  /* border: 2rpx solid #fff; */
}

.avatar-name {
  font-size: 24rpx;
  color: #fff;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
}

.card-badge {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  background-color: rgba(255, 127, 80, 0.9);
  color: #fff;
  font-size: 20rpx;
  padding: 6rpx 12rpx;
  border-radius: 16rpx;
}
.card-topic {
  background: transparent url('@/static/images/official_img__topics_tag.png') no-repeat bottom right;
  background-size:142rpx 142rpx;
}
.topic-content {
  padding: 20rpx;
}

.topic-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 20rpx;
}

.topic-text {
  font-size: 26rpx;
  color: #333;
}

/* 动态列表 */
.moments-list {
  padding: 0 30rpx 30rpx;
}

.moment-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

.post_top {
  width: 32rpx;
  height: 32rpx;
  margin-right: 4rpx;
}

.icon_post {
  width: 32rpx;
  height: 32rpx;
}

.interaction-text {
  font-family: PingFang SC, PingFang SC;
  font-size: 28rpx;
  color: #B4B4C2;
}
.interaction-item-left {
  width: 400rpx;
}

.sticky-badge {
  color: #FC893F;
  font-size: 24rpx;
  padding-bottom: 18rpx;
  display: flex;
  align-items: center;
}

/* 用户信息 */
.user-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}

.post-time {
  font-size: 24rpx;
  color: #999;
}

/* 动态内容 */
.moment-content {
  margin-bottom: 20rpx;
}

.moment-tags {
  margin-bottom: 16rpx;
}

.tag-text {
  font-size: 28rpx;
  color: #FF7F50;
}

.moment-text {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 16rpx;
}

.moment-location {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 26rpx;
  color: #999;
}

/* 互动栏 */
.interaction-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.interaction-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 26rpx;
  color: #999;
}
.interaction-item-right {
  flex: 1;
  display: flex;
  justify-content: right;
  align-items: center;
  text-align: right;
}

/* 底部功能栏 */
.bottom-function-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 120rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.function-icon {
  width: 56rpx;
  height: 56rpx;
}

.function-text {
  font-size: 24rpx;
  color: #666;
}

/* 悬浮发布按钮 */
.publish-btn {
  position: fixed;
  right: 40rpx;
  bottom: 180rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #FF7F50;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(255, 127, 80, 0.4);
  z-index: 100;
}

/* 回复弹窗 */
.reply-popup-content {
  padding: 30rpx;
  background-color: #fff;
}

.reply-input-container {
  width: 100%;
  height: 200rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.reply-input {
  width: 100%;
  height: 100%;
  background-color: transparent;
  font-size: 32rpx;
  color: #333;
  line-height: 1.5;
  padding: 0;
}

.reply-placeholder {
  color: #999;
}

.reply-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cancel-reply-btn,
.submit-reply-btn {
  width: 320rpx;
  height: 92rpx;
  line-height: 92rpx;
  border-radius: 46rpx;
  font-size: 32rpx;
  font-weight: 500;
}

.cancel-reply-btn {
  background-color: #f5f5f5;
  color: #666;
}

.submit-reply-btn {
  background-color: #3C6CFC;
  color: #fff;
}

.submit-reply-btn:disabled {
  background-color: #ccc;
  color: #fff;
}
</style>